<template>
	<view class="flex align-center">
		<view
			:class="isAni ? 'ani-wave-item' : ''"
			v-for="(item, index) in seconds"
			:key="index"
			:style="{
				width: w,
				height: isAni ? item.h + 'px' : item.defaultH + 'px',
				backgroundColor: bg,
				margin: '0 2px',
				animationDelay: item.time + 's'
			}"
		>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 是否让声波动起来
			isAni: {
				type: Boolean,
				default: false,
			},
			
			// 声波宽度
			w: {
				type: String,
				default: '2px'
			},
			
			// 声波高度（固定，如果想自适应，那么需要改源码）
			h: {
				type: String,
				default: '7px'
			},
			
			// 声波颜色
			bg: {
				type: String,
				default: '#1e9fff'
			}
		},
		
		data() {
			return {
				// 声波属性集合
				seconds: [
					{ time: 0.1, defaultH: 9, h: 7 },
					{ time: 0.3, defaultH: 15, h: 7 },
					{ time: 0.6, defaultH: 27, h: 7 },
					{ time: 0.3, defaultH: 15, h: 7 },
					{ time: 0.1, defaultH: 9, h: 7 },
				]
			}
		},
		
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.ani-wave-item {
		animation: wave 0.2s infinite ease-in-out alternate;
	}
	
	// 声波动画
	@keyframes wave {
		from {
			transform: scaleY(1);
		}
		to {
			transform: scaleY(5);
		}
	}
</style>